<template>
  <footer class="footer">
    <span class="todo-count">
      剩余
      <strong>{{list.length}}</strong>
    </span>
    <ul class="filters" @click="changeOk">
      <li v-for="(item,index) in arr" :key="index">
        <a @click="isOk=index" :class="{selected:isOk==index}" href="javascript:;">{{item}}</a>
      </li>
    </ul>
    <button @click="clearTask" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      arr: ["全部", "未完成", "已完成"],
      isOk: 0,
    };
  },
  methods: {
    changeOk() {
      this.$emit("changeTask", this.isOk);
    },
    clearTask() {
      this.$emit("clearTask");
    },
  },
};
</script>